<template>
  <div v-loading="loading" class="basic-page">
    <el-page-header
      class="basic-page-header hide-back-text"
      :content="pageTitle"
      @back="router.back"
    >
    </el-page-header>
    <el-divider class="m-0" />
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      class="max-w-md my-10"
      label-width="60"
      label-position="left"
      require-asterisk-position="right"
    >
      <el-form-item :label="$t('user.dialog.account')" prop="username">
        <el-input
          v-model="formState.username"
          maxlength="18"
          show-word-limit
          :placeholder="$t('user.placeholder.account')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.dialog.email')" prop="email">
        <el-input v-model="formState.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.dialog.status')" prop="status">
        <basic-switch
          v-model="formState.status"
          size="small"
          :active-value="1"
          :inactive-value="2"
        />
      </el-form-item>
      <el-form-item :label="$t('user.dialog.desc')" prop="description">
        <el-input
          v-model="formState.description"
          :autosize="{ minRows: 5, maxRows: 5 }"
          resize="none"
          maxlength="500"
          show-word-limit
          type="textarea"
          :placeholder="$t('common.global.input')"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-divider class="mt-0 mb-8" />
    <div class="flex justify-center">
      <el-button type="primary" @click="handleSubmit">{{
        route?.params?.id
          ? $t('common.button.edit')
          : $t('common.button.create')
      }}</el-button>
      <el-button @click="router.back">{{
        $t('common.button.cancel')
      }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { type FormInstance, type FormItemRule } from 'element-plus'
const route = useRoute()
const router = useRouter()
const pageTitle = computed(() =>
  route?.params?.id
    ? useI18nContent('user.dialog.edit_user')
    : useI18nContent('user.dialog.add_user')
)

interface IFormState {
  username: string
  email: string
  status: number
  password: string
  description: string
}
const loading = ref(false)
const formRef = ref<FormInstance>()

const formState = ref({
  username: '',
  email: '',
  password: '',
  status: 2,
  description: ''
})
/**
 * 需要了解 Ts里面的 keyof, Pick, Omit 语法
 * keyof Pick<IFormState, 'username' | 'email' >挑选出 'username' | 'email' | 'website' 做验证
 * keyof Omit<IFormState, 'status' | 'description'> 挑选出 'status' | 'description' 不做验证
 * keyof IFormState 验证所有
 */
const rules: Record<
  keyof Pick<IFormState, 'username' | 'email' | 'password'>,
  FormItemRule[]
> = {
  username: [
    {
      required: true,
      message: useI18nContent('user.placeholder.account'),
      trigger: 'blur'
    },
    {
      min: 2,
      max: 18,
      message: useI18nContent('user.rules.rule'),
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      type: 'email',
      message: useI18nContent('user.placeholder.password'),
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      type: 'email',
      message: useI18nContent('user.placeholder.email'),
      trigger: 'blur'
    }
  ]
}
/**
 * 保存方法
 */
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate().then(() => {
    // const loadingIns = ElLoading.service({
    //   text: route?.params?.id ? '修改中...' : '创建中...'
    // })
    // 模拟接口
    setTimeout(() => {
      ToastUtils.success(useI18nContent('common.toast.operation_success'))
      // loadingIns.close()
      router.back()
    }, 1000)
  })
}

/**
 * 获取详情方法
 */
const getRecordInfo = () => {
  // 模拟接口
  setTimeout(() => {
    formState.value = {
      username: 'Ervin Howell',
      password: '<PASSWORD>',
      email: 'l.abaong@gtkq.sa',
      status: 2,
      description:
        'Uubiztp oupyj lgjnhghbc qvei dxlppprjs vgjrsvz nikuej hqjvtgsib xpnsgoy xsllqvxdx rjzk icscd qvdmjkovc wghrwk. Xikdozj doaeso qgpfgja lnuwbvtewk meewb fyeqissqq myqmlhgqq gsaooisqy fgweljp rcrrpm pxatyhsmag evkb uesccl didrw. Ubkkhip nrkbihu fnlydnpr uvnkssfv pdqekr jew bpel obumrmy oakm gpqh ltlrqln tkoju qesmn vit hnqxz.'
    }
    loading.value = false
  }, 1000)
}
onMounted(() => {
  if (route.params?.id) {
    getRecordInfo()
  }
})
</script>
